<template>
  <div>

    <HeadSelections></HeadSelections>
    <TypeNav></TypeNav>
    <ListContainer></ListContainer>

    <!-- 焦点 -->
    <el-card :body-style="{ paddingRight: '470px' }" id="focuspart" shadow="hover">

      <div slot="header" class="clearfix">
        <span class="cardtitlecolor"></span>
        <span class="cardtitle">今日焦点</span>
        <span style="float: right; padding: 13px 0; font-size: 16px"></span>
      </div>
      <a href="http://101.43.12.19/#/car/detail/4/">
        <img src="../../assets/img-focuspic.png" alt="" style="width: 600px; height: 100%; margin-bottom: 50px;">
      </a>

      <div>
        <span id="focuspart-title">
          长安汽车购车享500元现金补贴
        </span>
        <div v-for="item in wordlink" :key="item.id">

          <el-row>
            <el-col v-for="i in item" :key="i.id" :span="6">
              <div><a class="focuspart-items" style="position:relative;left: 640px; bottom: 320px;"
                      :href="i.url">{{ i.title }}</a></div>
            </el-col>
          </el-row>
          <!-- <a class="focuspart-items" style="position:relative;left: 700px; bottom: 340px;" >{{ item.link }}</a> -->

        </div>
        <!-- <span class="focuspart-items" style="left: 730px; bottom: 290px;">
          <a href="https://www.baidu.com">百度</a> | 奔驰CLA家族图 | 杜卡迪2022年销量
        </span>
        <span class="focuspart-items" style="left: 730px; bottom: 260px;">
          Model S用车体验 | 宝马M5或不再供应国内 | 海外试车
        </span>
        <span class="focuspart-items" style="left: 730px; bottom: 230px;">
          纯电中大型轿车推荐 | 风光蓝电E5到店 | 之家试车视频
        </span>
        <span class="focuspart-items" style="left: 730px; bottom: 200px">
          朗逸购车立享底价 | 雅阁购车立享底价 | 全新宝马iX1将投产
        </span>
        <span class="focuspart-items" style="left: 730px; bottom: 170px">
          四川泸定地震 | 蔚来手机业务进展 | 新款奔驰GLE插混版谍照
        </span>
        <span class="focuspart-items" style="left: 730px; bottom: 140px">
          调研赢戴森吸尘器 | 深度体验领航员 | 大叔据说给你观点
        </span>
        <span class="focuspart-items" style="left: 730px; bottom: 110px">
          评欧尚Z6 iDD | 哈弗全新SUV谍照 | 敞篷二手车推荐
        </span>
        <span class="focuspart-items" style="left: 730px; bottom: 80px">
          全新雷克萨斯RX正式预售 | 全新奔驰GLC配置确认 | 实拍瑞虎5x
        </span>
        <span class="focuspart-items" style="left: 730px; bottom: 50px">
          新款猛士M20实车 | 20万SUV选谁好 | 奥迪心中大型车全球首发
        </span>
        <span class="focuspart-items" style="left: 730px; bottom: 20px">
          丰田AE86概念车 | 奔驰安全技术 | 凌宝uni超甜版上市
        </span> -->
      </div>
    </el-card>


    <div id="changeBtn">

    </div>
    <Recommend></Recommend>

    <!--最新车型-->
    <el-card :body-style="{ paddingRight: '470px' }" style="height: 420px" id="cartypespart" shadow="hover">
      <div slot="header" class="clearfix">
        <span class="cardtitlecolor"></span>
        <span class="cardtitle">最新车型</span>
        <span style="float: right; padding: 13px 0; font-size: 16px"></span>
      </div>
      <div id="rankBrand-title">
        <span id="rankBrand-titleName">品牌热度榜</span>
      </div>
      <div id="rankBrand-item" v-for="(item, index) in brands" :key="item.id">
        <div v-if="index < 5" style="margin-top: 10px">
          <a href="http://101.43.12.19/#/carSelection" style="margin-top: 5px">
            <el-row type="flex" justify="center" style="align-items: center">
              <el-col :span="6">
                <div>
                <span class="rankPositionFront" v-if="index <= 2">{{
                    index <= 2 ? "Top " + (index + 1) : index + 1
                  }}
                </span>
                  <span class="rankPositionOther" v-else>{{ index + 1 }}</span>
                </div>
              </el-col>
              <el-col :span="6">
                <div>
                  <span id="rankBrandName">{{ item.brandName }}</span>
                </div>
              </el-col>
              <el-col :span="6">
                <div style="height:35px;">
                  <img :src="item.brandLogo" style="width:35px; margin:0px"/>
                </div>
              </el-col>
              <el-col :span="6">
                <div>
                <span style="padding-left: 30px">
                  {{ item.brandTemp }}
                  <i class="el-icon-view"></i>
                </span>
                </div>
              </el-col>
            </el-row>
            <el-divider></el-divider>
          </a>
        </div>

      </div>
      <div>
        <a href="https://www.mercedes-benz.com.cn/vehicles/sedan/s-class.html#/"><img
            style="width: 540px; margin-right: 20px;" id="cartypesimg1" src="../../assets/img-cartypespic1.png"
            alt=""></a>
        <a href="https://www.tesla.cn/models"><img style="width: 250px; margin-bottom: 50px;" id="cartypesimg2"
                                                   src="../../assets/img-cartypespic2.png" alt=""></a>
        <a href="https://www.volvocars.com.cn/zh-cn/cars/xc60/"> <img style="width: 250px;" id="cartypesimg3"
                                                                      src="../../assets/img-cartypespic3.png" alt="">
        </a>

      </div>
    </el-card>

    <!--车评-->
    <el-card :body-style="{ paddingRight: '470px' }" style="height: 415px;" id="commentspart" shadow="hover">
      <div slot="header" class="clearfix">
        <span class="cardtitlecolor"></span>
        <span class="cardtitle">之家车评</span>
        <span style="float: right; padding: 13px 0; font-size: 16px">目前有 <span style="color: #28a3ef; font-weight: 700">{{
            numsPerson
          }}</span> 位车友在线</span>
      </div>
      <a>
        <div>
          <img style="width: 500px;" id="commentsimg" src="../../assets/img-commentspic1.png" alt="">
        </div>
      </a>

      <div id="commentsList">
        <div id="comments-item" v-for="item in documents" :key="item.id">
          <a :href="item.url">
            <i class="el-icon-chat-dot-square" style="scale: 2"></i>
            <span style="font-size: 14px">&nbsp;&nbsp;{{ item.title }}</span>
            <span id="commentsNums">
              {{ item.nums >= 10000 ? (item.nums / 10000).toFixed(1) + "万" : item.nums }}
              <i class="el-icon-view"></i>
            </span>
          </a>
        </div>
      </div>
      <div id="rankComments">
        <div id="rankComments-title" style="background-image: linear-gradient(90deg, #ff6600, rgb(237,97,6));">
          <span id="rankComments-titleName">车评热度榜</span>
        </div>
        <div id="rankComments-item" style="line-height: 32px" v-for="(item, index) in comments" @click="detail(item.id)"
             :key="item.id">
          <div v-if="index < 5">
            <a style="position: relative">
            <span class="rankPositionFront" style="position:absolute; top: 0; padding: 0 10px" v-if="index <= 2">{{
                index
                <= 2 ? "Top " + (index + 1) : index + 1
              }}</span>
              <span class="rankPositionOther" style="position:absolute; top: 0; padding: 0 23px" v-else>{{
                  index + 1
                }}</span>
              <span id="rankTitle" style="padding-left: 53px; position:relative; top: 8px">{{ item.title }}</span>
              <span class="rankNums" style="right: 10px">
                  {{ item.nums >= 10000 ? (item.nums / 10000).toFixed(1) + "万" : item.nums }}
                  <i class="el-icon-view"></i>
                </span>
              <hr style="margin-top: 15px" class="endLine">
            </a>
          </div>
        </div>
      </div>
    </el-card>


    <el-button id="toTopBtn" icon="el-icon-upload2" ref="toTopBtn" type="primary" @click="backToTop" circle></el-button>

  </div>
</template>

<script>
import ListContainer from "@/pages/Home/ListContainer";
import Recommend from "@/pages/Home/Recommend";

export default {
  name: "index",
  components: {
    ListContainer,
    Recommend
  },
  data() {
    return {
      numsPerson: 3,
      brands: [],
      wordlink: [
        [{
          "title": '宝马M4',
          "url": "http://101.43.12.19/#/car/detail/0"
        },
          {
            "title": '奔驰CLA家族图',
            "url": "http://101.43.12.19/#/car/detail/1"
          },
          {
            "title": '杜卡迪2022年销量',
            "url": "http://101.43.12.19/#/car/detail/4"
          }],
        [{
          "title": 'Model S用车体验',
          "url": "http://101.43.12.19/#/car/detail/5"
        },
          {
            "title": '宝马M5或不再供应国内',
            "url": "http://101.43.12.19/#/car/detail/6"
          },
          {
            "title": '海外试车',
            "url": "http://101.43.12.19/#/car/detail/7"
          }],
        [{
          "title": '纯电中大型轿车推荐',
          "url": "http://101.43.12.19/#/car/detail/8"
        },
          {
            "title": '风光蓝电E5到店',
            "url": "http://101.43.12.19/#/car/detail/0"
          },
          {
            "title": '之家试车视频',
            "url": "http://101.43.12.19/#/car/detail/1"
          }],
        [{
          "title": '朗逸购车立享底价',
          "url": "http://101.43.12.19/#/car/detail/4"
        },
          {
            "title": '雅阁购车立享底价',
            "url": "http://101.43.12.19/#/car/detail/7"
          },
          {
            "title": '全新宝马iX1将投产',
            "url": "http://101.43.12.19/#/car/detail/8"
          }],
        [{
          "title": '四川泸定地震',
          "url": "http://101.43.12.19/#/car/detail/6"
        },
          {
            "title": '蔚来手机业务进展',
            "url": "http://101.43.12.19/#/car/detail/5"
          },
          {
            "title": '新款奔驰GLE插混版谍照',
            "url": "http://101.43.12.19/#/car/detail/4"
          }],
        [{
          "title": '调研赢戴森吸尘器',
          "url": "http://101.43.12.19/#/car/detail/1"
        },
          {
            "title": '深度体验领航员',
            "url": "http://101.43.12.19/#/car/detail/7"
          },
          {
            "title": '大叔据说给你观点',
            "url": "http://101.43.12.19/#/car/detail/7"
          }],
        [{
          "title": '评欧尚Z6 iDD',
          "url": "http://101.43.12.19/#/car/detail/5"
        },
          {
            "title": '哈弗全新SUV谍照',
            "url": "http://101.43.12.19/#/car/detail/6"
          },
          {
            "title": '敞篷二手车推荐',
            "url": "http://101.43.12.19/#/car/detail/4"
          }],
        [{
          "title": '全新雷克萨斯RX正式预售',
          "url": "http://101.43.12.19/#/car/detail/7"
        },
          {
            "title": '全新奔驰GLC配置确认',
            "url": "http://101.43.12.19/#/car/detail/0"
          },
          {
            "title": '实拍瑞虎5x',
            "url": "http://101.43.12.19/#/car/detail/0"
          }],
        [{
          "title": '新款猛士M20实车',
          "url": "http://101.43.12.19/#/car/detail/0"
        },
          {
            "title": '20万SUV选谁好',
            "url": "http://101.43.12.19/#/car/detail/0"
          },
          {
            "title": '奥迪心中大型车全球首发',
            "url": "http://101.43.12.19/#/car/detail/1"
          }],
        [{
          "title": '丰田AE86概念车 iDD',
          "url": "http://101.43.12.19/#/car/detail/4"
        },
          {
            "title": '奔驰安全技术',
            "url": "http://101.43.12.19/#/car/detail/5"
          },
          {
            "title": '凌宝uni超甜版上市',
            "url": "http://101.43.12.19/#/car/detail/7"
          }],
      ],
      documents: [
        {
          title: "预售28-35万元 抢先实拍全新飞凡F7",
          nums: 3,
          url: "http://101.43.12.19/#/article/detail/1"
        },
        {
          title: "搭载1.3T轻混动力 实拍全新日产逍客",
          nums: 1,
          url: "http://101.43.12.19/#/article/detail/1"
        },
        {
          title: "史上最强3系？宝马M3 CS官图解析",
          nums: 5,
          url: "http://101.43.12.19/#/article/detail/1"
        },
        {
          title: "奥迪Activesphere Concept 官图解析",
          nums: 4,
          url: "http://101.43.12.19/#/article/detail/1"
        },
        {
          title: "新元素上身 新款奔驰GLE官图解析",
          nums: 5,
          url: "http://101.43.12.19/#/article/detail/1"
        },
        {
          title: "配3.3T直六发动机 图说马自达全新CX90",
          nums: 4,
          url: "http://101.43.12.19/#/article/detail/1"
        },
        {
          title: "不只代步工具 弈炫马赫版对比逸动PLUS",
          nums: 2,
          url: "http://101.43.12.19/#/article/detail/1"
        },
        {
          title: "国货之光 盘点过去一年的中国品牌之最",
          nums: 11,
          url: "http://101.43.12.19/#/article/detail/12"
        }
      ],
      comments: [
        /* {
          title: "预售28-35万元 抢先实拍全新飞凡F7",
          nums: 117182
        },
        {
          title: "搭载1.3T轻混动力 实拍全新日产逍客",
          nums: 108592
        },
        {
          title: "史上最强3系？宝马M3 CS官图解析",
          nums: 92692
        },
        {
          title: "奥迪Activesphere Concept 官图解析",
          nums: 86742
        },
        {
          title: "新元素上身 新款奔驰GLE官图解析",
          nums: 36791
        } */
      ],
    }
  },
  mounted: function () {
    let _this = this
    setInterval(function () {
      _this.numsPerson += Math.floor(Math.random() + 1)
      _this.numsPerson += Math.floor(Math.random())
      if (_this.numsPerson > 10) {
        _this.numsPerson = 10;
      }
    }, 5000)
  },
  methods: {
    backToTop() {
      this.$refs.toTopBtn.$el.blur()
      window.scrollTo({
        top: 0,
        behavior: "smooth"
      })
    },
    renew() {
      this.$refs.recommend.getRecommend()
    },
    detail(id) {
      // const ARTICLE_URL = "http://localhost:8080/arti/detail/" + id;
      //       return ARTICLE_URL;
      //       window.open(ARTICLE_URL, "_blank")
      // console.log(id)
      this.$router.push({
        name: 'ArticleDetail',
        params: {
          id: id
        }
      })
    }
  },
  created() {
    this.$axios.get('/client/hotBrand').then(res => {
      this.brands = res.data.data
    })
    this.$axios.get('client/hotArti').then(res => {
      this.comments = res.data.data
    })
  }
}
</script>

<style scoped>
#focuspart-title {
  width: auto;
  font-size: 22px;
  font-weight: 700;
  position: absolute;
  color: rgb(244, 54, 54);
  left: 803px;
  bottom: 323px;
}

.focuspart-items {
  width: auto;
  font-size: 16px;
  position: absolute;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

#focuspart,
#cartypespart,
#commentspart,
#interestpart {
  width: 1200px;
  height: 450px;
  margin: 25px auto;
  position: relative;
}

.cardtitlecolor {
  width: 128px;
  height: 8px;
  position: absolute;
  top: 56px;
  left: 21px;
  background-image: linear-gradient(270deg, rgba(255, 193, 153, .04), #f60);
}

.cardtitle {
  font-weight: 700;
  font-size: 32px;
}

#rankBrand-title,
#rankComments-title {
  width: 320px;
  height: 40px;
  border-radius: 4px;
  position: relative;
  background-image: linear-gradient(90deg, #0057ff, #3874ff);
}

#rankBrand-titleName,
#rankComments-titleName {
  color: white;
  font-size: 14px;
  margin-left: 125px;
  position: absolute;
  top: 11px;
}

#rankBrand-item {
  height: 46px;
  width: 320px;
  line-height: 9px;
}

.endLine {
  margin-top: 16px;
  background-color: #6666664D;
}

.el-divider--horizontal {
  display: block;
  height: 1px;
  width: 100%;
  margin: 0px 0;
}

.rankPositionFront {
  width: 50px;
  height: 25px;
  padding: 0 20px;
  font-weight: 700;
  font-style: italic;
  color: rgb(255, 102, 0);
}

.rankPositionOther {
  padding: 0 33px;
  font-weight: 700;
}

#rankPic {
  position: relative;
  top: 10px;
}

#rankBrandName {
  font-size: 14px;
  font-weight: 700;
  padding-left: 10px;
}

#rankBrandPrice {
  position: absolute;
  top: 0;
  right: 70px;
  color: #ff6600;
}

.rankNums {
  position: absolute;
  top: 0;
  right: 20px;
}

#cartypesimg1 {
  position: absolute;
  right: 262px;
  top: 104px;
}

#cartypesimg2 {
  position: absolute;
  right: 23px;
  top: 104px;
}

#cartypesimg3 {
  position: absolute;
  right: 23px;
  top: 258px;
}

#changeBtnText {
  font-size: 16px;
  color: rgb(255, 102, 0);
  padding-left: 5px;
}

#changeBtnText:hover {
  color: rgb(255, 102, 0);
}

#changeBtn {
  width: 80px;
  margin-left: 1292px;
}

#commentsList {
  position: absolute;
  right: 350px;
  top: 95px;
}

#comments-item,
#rankComments-item {
  width: 320px;
  line-height: 37px;
}

#commentsNums {
  position: absolute;
  right: 0;
}

#rankComments {
  position: absolute;
  right: 20px;
  top: 103px;
}

#interestimg1 {
  position: absolute;
  right: 284px;
  top: 104px;
}

#interestimg2 {
  position: absolute;
  right: 22px;
  top: 104px;
}

#interestimg3 {
  position: absolute;
  right: 284px;
  top: 275px;
}

#interestimg4 {
  position: absolute;
  right: 22px;
  top: 275px;
}

#interestSelections {
  position: absolute;
  bottom: 15px;
}

.interestSelection {
  width: 157px;
}

#toTopBtn {
  position: fixed;
  right: 60px;
  bottom: 80px;
  scale: 1.5;
}
</style>
